<!-- 
 * 操作日志组件
 * @author: 
 * @since: 2022-06-30
 * index.vue
-->
<template>
  <div class="operation-log-container">
    <div class="search">
      <Filters :formModel="state.formModel" :formLabel="state.formLabel" @reset="reset" @filter="filter" @provinceChange="provinceChange" @cityChange="cityChange" @roleChange="roleChange"></Filters>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" @getCurrentChange="getCurrentChange" @colSelect="colSelect" @refresh="getUserOperateLogList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" :isShowGrooveHandleCol="false">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { colFilters } from '@/utils/common.js'
import { getUserOperateLogListApi } from '@/api/interface/log.js'
import { getRegionApi } from '@/api/public/publicDict.js'
import { getAllRoleList } from '@/api/interface/role.js'



const state = reactive({
  formModel: {//搜索列表的参数
    userName: '',//用户账号
    province: '',//省份
    city: '',//城市
    userRole: '',//用户角色
    state: '',//登录状态
    depart: '',//所在单位/部门
    loginTime: [],//登录时间
    startDate: '',//登录开始时间
    endDate: '',//登录结束时间
  },
  formLabel: [
    {
      label: '用户账号',
      model: "userName",
      type: "text",
      width: '160',
      placeholder: '请输入用户账号',
    },
    {
      label: '省份',
      model: "province",
      type: "select",
      width: '160',
      option: [],
      change: 'provinceChange',
    },
    {
      label: '城市',
      model: "city",
      type: "select",
      width: '160',
      option: [],
      change: 'cityChange',
    },
    {
      label: '用户角色',
      model: "userRole",
      type: "select",
      width: '160',
      option: [],
      change: 'roleChange',
    },
    {
      label: '操作状态',
      model: "state",
      type: "select",
      width: '160',
      option: [
        {
          key: '成功',
          value: '成功'
        },
        {
          key: '失败',
          value: '失败'
        }
      ],
    },
    {
      label: '操作时间',
      model: "loginTime",
      type: "datetimerange",
      width: '360',
    },
    {
      label: '所在单位/部门',
      model: "depart",
      type: "select",
      width: '160',
      option: [],
    },
  ],
  tableData: [],
  tableHeader: [
    {
      label: '用户账号',
      prop: "userName",
    },
    {
      label: '姓名',
      prop: "realName",
    },
    {
      label: '用户角色',
      prop: "roleName",
    },
    {
      label: '所在单位/部门',
      prop: "rolenode",
    },
    {
      label: '操作模块',
      prop: "operationModule",
    },
    {
      label: '操作内容',
      prop: "operationType",
    },
    {
      label: '操作状态',
      prop: "state",
    },
    {
      label: 'IP地址',
      prop: "operationIp",
    },
    {
      label: '操作地址',
      prop: "AllAddress",
    },
    {
      label: '操作时间',
      prop: "insertDate",
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  roleRowData: {},//table每一行数据
  selectTableId: [],//选择表格数据
})

const loading = ref(true)


onMounted(() => {
  getAllRole()
  getProvince()
  getUserOperateLogList()
})
//获取省级行政区数据
const getProvince = async () => {
  await getRegionApi({ criSuperiorCode: '000000' }).then((res) => {
    if (res.status === 200) {
      state.formLabel[1].option = res.data.map(v => ({
        key: v.criName,
        value: v.criCode
      }))

    }
  })
}

//获取市级行政区数据
const getCity = async (code) => {
  await getRegionApi({ criSuperiorCode: code }).then((res) => {
    if (res.status === 200) {
      state.formLabel[2].option = res.data.map(v => ({
        key: v.criName,
        value: v.criCode
      }))
    }
  })
}
//选择省份
const provinceChange = (code) => {
  getCity(code)
  state.formLabel[1].option.forEach(item => {
    if (item.value === code) {
      state.formModel.province = item.key
    }
  })

}
//选择城市
const cityChange = (code) => {
  state.formLabel[2].option.forEach(item => {
    if (item.value === code) {
      state.formModel.city = item.key
    }
  })

}

//获取角色列表
const getAllRole = () => {
  const params = {
    ipi: 1,
    ips: 100,
    rolename: '',
    valid: '',
  }
  getAllRoleList(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      state.formLabel[3].option = data.result.map(item => ({
        key: item.rolename,
        value: item.id
      }))
    }

  })
}

//选择角色
const roleChange = (id) => {
  state.formLabel[3].option.forEach(item => {
    if (item.value === id) {
      state.formModel.userRole = item.key
    }

  })
}

//获取操作日志列表
const getUserOperateLogList = () => {
  loading.value = true
  let time = {}
  if (state.formModel.loginTime.length > 0) {
    const [startDate, endDate] = state.formModel.loginTime
    time.startDate = startDate
    time.endDate = endDate
  }
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    userName: state.formModel.userName,
    province: state.formModel.province,
    city: state.formModel.city,
    userRole: state.formModel.userRole,
    state: state.formModel.state,
    startDate: time.startDate,
    endDate: time.endDate
  }
  getUserOperateLogListApi(params).then(res => {
    const { status, data } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result.map(item => ({
        ...item,
        roleName: item.userRole.join().trim()
      }))
      state.pagination.total = data.total
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
    }
  })

}

//操作日志模块功能按钮
const btnList = reactive([
  // {
  //   name: '导出日志',
  //   bgColor: '#00A2FF'
  // },
])

//点击登录日志操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://导出日志
      console.log('导出日志');
      break;
  }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getUserOperateLogList()
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getUserOperateLogList()
}

//搜索
const filter = () => {
  getUserOperateLogList()
}
//重置
const reset = () => {
  for (let key in state.formModel) {
    if (key === 'loginTime') {
      state.formModel[key] = []
    } else {
      state.formModel[key] = ''
    }
  }
  getUserOperateLogList()

}


</script>

<style lang="scss" scoped></style>
